<template>
  <div class="body-box">
    <div id="mapContainer"></div>
    <div class="search-map">
      <div class="now-select-map">当前选择：{{province}}{{city}}{{local}}</div>
      <div class="map-select-input">
        <input id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus="this.value=''" />
      </div>
      <div class="btn-box-am">
          <el-button class="com-btn" icon="el-icon-check" @click="trueAddr()">确定选择</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from "AMap"; // 引入高德地图

export default {
  data() {
    return {
      longitude: "",
      latitude: "",
      local: "请选择定位地址",
      province : '',
      city : ''
    };
  },
  mounted() {
    var that = this;
    AMap.plugin(
      ["AMap.Geolocation", "AMap.Autocomplete", "AMap.PlaceSearch"],
      function() {
        let geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          let map = new AMap.Map("mapContainer", {
            center: [data.position.lng, data.position.lat],
            resizeEnable: true,
            zoom: 12,
            keyboardEnable: false
          });
          // 地理编码
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          });
          map.on("click", function(e) {
            that.longitude = e.lnglat.lng;
            that.latitude = e.lnglat.lat;
            var lnglat = [e.lnglat.lng, e.lnglat.lat];
            geocoder.getAddress(lnglat, function(status, result) {
              if (status === "complete" && result.info === "OK") {
                // result为对应的地理位置详细信息
                that.province = result.regeocode.addressComponent.province;
                that.city = result.regeocode.addressComponent.city;
                that.local = result.regeocode.addressComponent.district + result.regeocode.addressComponent.street + result.regeocode.addressComponent.streetNumber + result.regeocode.addressComponent.township;
              }
            });
          });
          var autoOptions = {
            city: "北京", //城市，默认全国
            input: "keyword" //使用联想输入的input的id
          };
          var autocomplete = new AMap.Autocomplete(autoOptions);
          var placeSearch = new AMap.PlaceSearch({
            city: "北京",
            map: map
          });
          AMap.event.addListener(autocomplete, "select", function(e) {
            var data = e.poi.location;
            that.longitude = data.lng;
            that.latitude = data.lat;
            that.local =e.poi.address + e.poi.name;
            var pca = e.poi.district;
            var pca_arr = pca.split('省');
            if(pca_arr.length > 1) {
              that.province = pca_arr[0]+'省';
              var pca_arr = pca_arr[1].split('市');
              that.city = pca_arr[0]+'市';
            }else{
              var pca_arr = pca.split('市');
              that.city = pca_arr[0]+'市';
              that.province = pca_arr[0];
            }
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);
          });
        }

        function onError(data) {
          // 定位出错
          this.toast(0,'定位失败');
        }
      }
    );
  },
  methods: {
      trueAddr(){
          if(!this.local || !this.latitude || !this.longitude)return this.toast(0,'请先定位选择地址');
          this.$parent.info.Address = this.local;
          this.$parent.info.Longitude = this.longitude;
          this.$parent.info.Latitude = this.latitude;
          this.$parent.info.Province = this.province;
          this.$parent.info.City = this.city;
          this.$parent.$layer.closeAll();
      }
  }
};
</script>

<style>
.search-map {
  position: fixed;
  top: 50px;
  width: 760px;
  left: 20px;
  height: 32px;
  line-height: 32px;
}
.now-select-map {
  height: 32px;
  background: #fff;
  overflow: hidden;
  padding: 0 10px;
  float: left;
  box-shadow: 1px 1px 3px rgba(26, 26, 26, 0.3);
}
.map-select-input {
  float: right;
  height: 32px;
  width: 200px;
}
.map-select-input > input {
  width: 100%;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-indent: 1em;
  box-shadow: 1px 1px 3px rgba(26, 26, 26, 0.3);
}
.map-select-input > input:focus {
  outline: none;
}
.btn-box-am{
    position: fixed;
    bottom: 20px;
    text-align: right;
    width: 760px;
    z-index: 99;
}
</style>